<template lang="html">
 <div class="main">
   <div class="test-map" id="test-map">

   </div>
 </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
  data () {
    return {
      map: null
    };
  },
  methods: {

  },
  mounted () {
    lazyAMapApiLoaderInstance.load().then(() => {
      AMap.plugin('AMap.DistrictLayer', () => {
        var disWorld = new AMap.DistrictLayer.World({
          zIndex: 10,
          styles: {
            // 颜色格式: #RRGGBB、rgba()、rgb()、[r, g, b, a]
            // 国境线
            'nation-stroke': 'rgba(20, 20, 233, 0.6)',
            // 海岸线
            'coastline-stroke': '',
            // 填充
            'fill': ''
          }
        });
        this.map = new AMap.Map('test-map', {
          features: ['bg', 'road'],
          zooms: [1, 15],
          center: [100, 36],
          showIndoorMap: false,
          zoom: 1,
          isHotspot: false,
          defaultCursor: 'pointer',
          touchZoomCenter: 1,
          pitch: 0,
          layers: [
          // disWorld
          // this.setWorld()
          ],
          viewMode: '3D',
          resizeEnable: true,
          mapStyle: 'amap://styles/7fbd2932c63ed9235ab53a7a6fc0db1d'
        });
        disWorld.setMap(this.map);
      });
    });
  }
};
</script>

<style lang="css" scoped>
  .test-map {
    width: 100%;
    height: 100vh;
  }
</style>
